<!DOCTYPE html>
<html layout:decorate="~{layouts/layout}"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>性能分析工具</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <link href="http://cdn.jsdelivr.net/webjars/bootstrap/5.1.3/css/bootstrap.min.css"
          media="screen"
          rel="stylesheet" th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.min.css}"/>
    <link href="../static/css/jquery.dataTables.css"
          media="screen"
          rel="stylesheet" th:href="@{/css/jquery.dataTables.css}"/>
    <link href="../static/css/dialog.css"
          media="screen"
          rel="stylesheet" th:href="@{/css/dialog.css}"/>
    <link href="../static/css/core.css"
          media="screen"
          rel="stylesheet" th:href="@{/css/core.css}"/>
    <script src="http://cdn.jsdelivr.net/webjars/jquery/3.6.0/jquery.min.js"
            th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
    <script src="../static/css/js/jquery.dataTables.js"
            th:src="@{/js/jquery.dataTables.js}"></script>
    <script src="../static/css/js/dialog.js"
            th:src="@{/js/dialog.js}"></script>
    <script src="../static/css/js/index.js"
            th:src="@{/js/index.js}"></script>

    <style type="text/css">
        table.gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }

        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }

        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }

        table.searchform {
            width: 100%;
            margin-top: 5px;
            margin-bottom: 5px;
        }

        table.searchform th {
        }

        table.searchform td {
        }
    </style>
</head>
<body>

<!-- Insert content into the layouts/layout.html -->
<th:block layout:fragment="content">
    <div class="hero-unit">
        <div style="text-align: right;">
            <button id="btnOpenMonitor">打开监控</button>
            <button id="btnCloseMonitor">关闭监控</button>
            <button id="btnSaveAllLog">解析日志</button>
            <button id="btnDeleteAllLog">清空日志</button>
            <button id="btnReload">刷新列表</button>
        </div>
        <div>
            <table class="searchform">
                <tbody>
                <tr>
                    <td style="text-align: right;background-color: #ececec;">脚本名称：</td>
                    <td style="text-align: left;background-color: #fafafa;"><input id="txtTypeName"
                                                                                   name="txtMethodName"
                                                                                   type="text">
                    <td style="text-align: right;background-color: #ececec;">方法名称：</td>
                    <td style="text-align: left;background-color: #fafafa;"><input id="txtMethodName"
                                                                                   name="txtMethodName"
                                                                                   type="text">
                    </td>
                    <td style="text-align: right;background-color: #ececec;">线程ID：</td>
                    <td style="text-align: left;background-color: #fafafa;"><input id="txtThreadId" name="txtThreadId"
                                                                                   type="text">
                    </td>
                    <td style="text-align: right;background-color: #ececec;">创建日期：</td>
                    <td style="text-align: left;background-color: #fafafa;"><input id="txtCreateDate"
                                                                                   name="txtCreateDate"
                                                                                   type="text">
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <table class="display" id="example" style="width:100%">
            <thead>
            <tr>
                <th>序号</th>
                <th>脚本</th>
                <th>方法</th>
                <th>行号</th>
                <th>耗时（毫秒）</th>
                <th>线程ID</th>
                <th>创建日期</th>
            </tr>
            </thead>
        </table>

        <div id="selectPidAndScriptDialog" style="display: none;">
            <table class="gridtable" style="width:100%">
                <thead>
                <tr>
                    <th colspan="2" style="text-align: center"><b>请选择进程（单选）</b></th>
                </tr>
                <tr>
                    <th style="width: 100px;">选择</th>
                    <th style="text-align: left;">进程</th>
                </tr>
                </thead>
                <tbody id="pidTbody">
                </tbody>
            </table>

            <table class="gridtable" style="width:100%">
                <thead>
                <tr>
                    <th colspan="2" style="text-align: center"><b>请选择脚本（多选）</b></th>
                </tr>
                <tr>
                    <th style="width: 100px;">选择</th>
                    <th style="text-align: left;">脚本</th>
                </tr>
                </thead>
                <tbody id="scriptTbody">
                </tbody>
            </table>
        </div>
    </div>
</th:block>
</body>
</html>
